<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>${message("admin.index.title")}</title>
    <link href="${base}/resources/admin/css/common.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">
        .powered {
            font-size: 9px;
            white-space:nowrap;
        }
    </style>
</head>
<body>
<div class="path">
${message("admin.index.title")}
</div>

<div class="line">
    <div class="memberCount">
        <b class="iconfont icon-huiyuan3"></b>
        <div class="data">
            <span>${memberCount}</span>
            <p class="powered">会员</p>
        </div>
    </div>
    <div class="waitingPaymentOrderCount">
        <b class="iconfont icon-wenzhang"></b>
        <div class="data">
            <span>${essayCount}</span>
            <p class="powered">文章</p>
        </div>
    </div>
    <div class="waitingShippingOrderCount">
        <b class="iconfont icon-zhibo"></b>
        <div class="data">
            <span>${liveCount}</span>
            <p class="powered">直播</p>
        </div>
    </div>
    <div class="unreadMessageCount">
        <b class="iconfont icon-unie64a"></b>
        <div class="data">
            <span>${unreadMessageCount}</span>
            <p class="powered">未读消息</p>
        </div>
    </div>
</div>
<div class="clearfix"></div>
<div class="line">
    <div class="marketableProductCount">
        <b class="iconfont icon-tiwen"></b>
        <div class="data">
            <span>${questionCount}</span>
            <p class="powered">易问易答-提问</p>
        </div>
    </div>
    <div class="notMarketableProductCount">
        <b class="iconfont icon-wolaihuida"></b>
        <div class="data">
            <span>${answerCount}</span>
            <p class="powered">易问易答-回答</p>
        </div>
    </div>
    <div class="stockAlertProductCount">
        <b class="iconfont icon-icon1"></b>
        <div class="data">
            <span>${courseCount}</span>
            <p class="powered">课程</p>
        </div>
    </div>
    <div class="outOfStockProductCount">
        <b class="iconfont icon-order"></b>
        <div class="data">
            <span>${courseOrderCount}</span>
            <p class="powered">课程订单</p>
        </div>
    </div>
</div>
<div class="clearfix"></div>
<!-- 用户走势图 -->
<div id="memberChart"></div>
<div class="systemList">
    <div><b>${message("admin.index.systemName")}</b><span> ${systemName}</span></div>
    <div><b>${message("admin.index.systemVersion")}</b><span> ${systemVersion}</span></div>
    <div><b>${message("admin.index.javaVersion")}</b><span> ${javaVersion}</span></div>
    <div><b>${message("admin.index.javaHome")}</b><span> ${javaHome}</span></div>
    <div><b>${message("admin.index.osName")}</b><span> ${osName}</span></div>
    <div><b>${message("admin.index.osArch")}</b><span> ${osArch}</span></div>
    <div><b>${message("admin.index.serverInfo")}</b><span> ${serverInfo}</span></div>
    <div><b>${message("admin.index.servletVersion")}</b><span> ${servletVersion}</span></div>
</div>
<script src="${base}/resources/admin/echarts/echarts.common.min.js"></script>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var memberChart = echarts.init(document.getElementById('memberChart'));
    option = {
        backgroundColor: '#F0F0F0',
        title: {
            text: '会员增长趋势',
            textStyle: {
                color: '#06a586',
                fontWeight: 'bold',
                fontSize: 14
            },
            top: 20,
            left: 10,
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['会员增长数']
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '10%',
            containLabel: true
        },
        xAxis: [
            {
                name:'时间',
                nameTextStyle:{
                    fontWeight: 'bold',
                    fontSize: 14,
                    color:'#06a586'
                },
                offset:0,
                nameGap:30,
                nameLocation:'middle',
                type: 'category',
                boundaryGap: false,
                data: [[#list memberCountsMap.keySet() as k]'${k?string("yyyy-MM-dd")}',[/#list]]
            }
        ],
        yAxis: [
            {
                name: '会员数',
                nameLocation:'middle',
                type: 'value',
                minInterval: 1,
                min:0,
                max:${memberCountMax}
            }
        ],
        series: [
            {

                type: 'line',
                stack: '总数',
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        textStyle:{
                            color: '#565656',
                            fontSize  : 14,
                            fontWeight: 200
                        }
                    }
                },
                areaStyle: {normal: {}},
                data: [[#list memberCountsMap.keySet() as k]${memberCountsMap.get(k)},[/#list]],
                lineStyle: {
                    normal: {
                        color: '#06a586',
                        width: 3
                    }
                },
                areaStyle: {
                    normal: {
                        color: '#06a586',
                    }
                }
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    memberChart.setOption(option);

</script>

</body>
</html>